<template>
    <div class="portalDetial">
        <Header/>
        <div class="bodyContent">
            <div class="detialClass" style="margin-left: 20px;margin-top: 10px">
                <div style="width: 350px">
                    <img width="375px" height="350px" :src="mainImage"/>
                    <ul style="margin-top: 10px">
                        <li v-for="item in smallImages" :key="item.index" class="smallImages" :class="item.isCheck?active:''">
                            <img :src="item.image" @mouseover="changeImage(item)" width="54px" height="54px"/>
                        </li>
                    </ul>
                </div>
                <div class="basicInfo">
                    <div class="title">{{spuData.name}}</div>
                    <div class="price"><span style="margin-left: 10px">商品价格:</span><span class="priceFont" style="margin-left: 20px">{{currentSkuPrice}}</span></div>
                    <div class="params">
                        <span class="paramsTitle">选择规格参数:</span>
                        <div style="margin-top: 10px;display: flex">
                            <span class="selectClass" @click="selectParams(item)" :class="item.isCheck?active:''" v-for="item in paramsArray" :key="item.skuId">
                                 {{item.paramStr}}
                            </span>
                        </div>
                    </div>
                    <div class="spaceNext"></div>
                    <div style="display: flex;">
                        <el-input-number v-model="num" :min="1" :max="1000" label="请输入数量"></el-input-number>
                        <span v-html="errorMsg" style="color: red;font-size: 10px;margin-left: 10px;margin-top: 10px"></span>
                    </div>
                    <div class="buttons">
                        <span class="orderButton" @click="orderPay">点击下单</span>
                    </div>
                </div>
            </div>
            <div class="descTitle"><span class="descTitleFont">商品介绍</span></div>
            <div class="description" v-html="description"></div>
        </div>
        <div class="footer"></div>
    </div>

</template>

<script lang="ts">
    /* eslint-disable */
    import { Component, Vue } from 'vue-property-decorator';
    import PortalApiActions from "@/components/api/portal-api-actions";
    import Header from '@/components/common/header.vue';
    @Component({
        components:{
            Header
        }
    })
    export default class ProductDetial extends Vue {
        public spuId:any="";
        public total=0;
        public currentPage=1;
        public isShowAddDialog=false;
        public imageUrl="http://localhost/images/logo.png";
        public portalData=[];
        public mainImage="";
        public description="";
        public searchText:any="";
        public spuData:any={};
        public currentImages=[];
        public active="active";
        public paramsArray=[];
        public smallImages=new Array<any>();
        public currentSkuItem:any={};
        public num:number=1;
        public errorMsg="";
        public price=0;
        public lock=false;
        public sumbitOrderToken="";
        async created(){
             this.spuId=this.$route.query.id;
             let result=await PortalApiActions.getSpuByCondition({id:this.spuId});
             let detialData=result.data;
             this.mainImage=detialData.data[0].skus[0].images.split(";")[0];
             this.description=detialData.data[0].description;
             this.spuData=detialData.data[0];
             this.sumbitOrderToken=detialData.sumbitOrderToken;
             this.price=(this.spuData as any).skus[0].price
             this.currentImages=detialData.data[0].skus[0].images.split(";");
             this.currentImages.forEach((item,index)=>{
                  this.smallImages.push({index,image:item});
             });
            detialData.data[0].skus.forEach(item=>{
                  let params=item.params;
                  let paramsStr="";
                  params.forEach(param=>{
                      paramsStr=paramsStr+param.value+",";
                  });
                  this.paramsArray.push({skuId:item.id,paramStr:paramsStr,isCheck:false});
             });
        }
        public async search(){

        }
        public get currentSkuPrice(){
            if(!(this.spuData as any).skus){
                return "";
            }
            return '￥'+(this.spuData as any).skus[0].price;
        }
        //改变图片
        public changeImage(item){
            this.mainImage=item.image;
            this.smallImages.forEach(itemImage=>{
                if(itemImage.image==item.image){
                    itemImage.isCheck=true;
                }else{
                    itemImage.isCheck=false;
                }
            })
        }
        //选择参数
        public selectParams(item:any){
            this.currentSkuItem=item;
            this.paramsArray.forEach(itemParam=>{
                if(itemParam.skuId==item.skuId){
                    itemParam.isCheck=true;
                }else{
                    itemParam.isCheck=false;
                }
            })
        }
        public async orderPay(){
             const skuId=this.currentSkuItem.skuId;
             if(!skuId){
                 this.$alert('请选择规格', {
                     confirmButtonText: '确定',
                     callback: action => {
                     }
                 });
                 return false;
             }
             if(this.lock) {
                 return false;
             }
             let result=await PortalApiActions.addUserOrder({
                 skuId:skuId,
                 qty:this.num,
                 price:this.price,
                 skuName:this.spuData.name,
                 sumbitOrderToken:this.sumbitOrderToken}
             );
             this.lock=true;
             if(result.data.status==1){
                 this.$router.push({
                     path: '/login',
                 });
             }else if(result.data.status==2){
                  this.errorMsg="库存不足";
             }else if(result.data.status==3){
                 this.errorMsg="订单已经提交，请勿重复操作";
             }else{
                 this.$router.push({
                     path: '/myOrder',
                 });
             }
        }

    }
</script>
<style lang="less">
    .portalDetial{
         .active{
             border: 1px solid red!important;
         }
         width: 100%;
         height: 100%;
        .header{
            width: 100%;
            height: 30px;
            min-width: 1000px;
            display: flex;
            line-height: 30px;
            background: #e3e4e5;
            border-bottom: solid 1px #ddd;
            .mainWidth{
                display: flex;
                width: 100%;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-left: 160px;
                margin-right: 160px;
                align-content: stretch;
                .headerFont{
                    margin-left: 20px;
                    color: #999;
                    cursor: pointer;
                    min-width: 60px;
                    font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
                }
                .rightArea{
                    margin-left: 20px;
                }
                .headerBody{
                    height: 108px;
                    width: 100%;
                    background-color: white;
                    display: flex;
                    align-items: center;
                }
            }
        }
        .headerBody{
            display: flex;
            justify-content: space-between;
            margin-left: 160px;
            background-color: ghostwhite;
            align-items: center;
            margin-right: 150px;
            border: solid 1px #ddd;
            margin-top: 15px;
            height: 100px;
            .logo{
                width: 150px;
                height: 60px;
                display: flex;
                align-items: center;
                margin-left: 10px;
            }
            .search{
                width: 450px;
                height: 30px;
                display: flex;
                align-items: center;
                input{
                    width: 400px;
                    height: 30px;
                    border: 2px solid #fa2a83;
                    outline: none;
                    border-top-left-radius: 2px;
                    border-bottom-left-radius: 2px;
                    background-color: #fff;
                }
                .searchButton{
                    background-image: url(//shop.vipstatic.com/img/common/header/sprites-hash-06206acd.png?78d4dd66);
                    background-position: -279px -97px;
                    width: 36px;
                    height: 36px;
                    display: inline-block;
                    background-color: #fa2a83;
                    cursor: pointer;
                }
            }

        }
        .bodyContent{
            margin-left: 161px;
            margin-right: 149px;
            display: flex;
            justify-content: flex-start;
            background-color: #fff;
            flex-direction: row;
            align-items: flex-start;
            .detialClass{
                margin-top: 10px;
                width: 100%;
                display: flex;
                ul{
                    margin: 0px;
                    padding: 0px;
                    display: flex;
                    flex-direction:row;
                    li{
                        list-style-type: none;
                        margin: 0px;
                        padding: 0px;
                    }
                }
            }
            .basicInfo{
                 display: flex;
                 width:calc(100% - 20px);
                flex-direction: column;
                .title{
                     margin-left: 100px;
                     font: 700 16px Arial, "microsoft yahei";
                     color: #666;
                     margin-bottom: 5px;
                 }
                .price{
                    margin-left: 100px;
                    height: 45px;
                    margin-top: 10px;
                    background: #f3f3f3;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    margin-right: 10px;
                }
                .params{
                    margin-left: 103px;
                    margin-right: 100px;
                    font-size: 14px;
                    margin-top: 5px;
                    .paramsTitle{
                        color: #6C6C6C;
                        font-size: 12px;
                    }
                }
                .priceFont{
                    color: #e4393c;
                    font-family: "microsoft yahei";
                    margin-right: 10px;
                    font-size: 18px;
                }
                .spaceNext{
                    flex: 1;
                }
                .buttons{
                    margin-bottom: 32px;
                    margin-left: 103px;
                    margin-right: 100px;
                    display: flex;
                    .orderButton{
                        align-items: center;
                        background: red;
                        display: flex;
                        justify-content: center;
                        cursor: pointer;
                        color: white;
                        line-height: 46px;
                        padding: 0 50px;
                        font-size: 18px;
                        font-family: "microsoft yahei";
                        font-weight: 700;
                    }
                }
            }
            .smallImages:nth-child(1){
                margin-left: 1px!important;
                cursor: pointer;
            }
            .smallImages{
                margin-left: 10px!important;
                cursor: pointer;
            }
        }
        .selectClass{
            border: 1px solid silver;
            height: 100px;
            font-size: 12px;
            height: 20px;
            text-align: center;
            display: flex;
            align-items: center;
            padding: 10px;
            margin-left: 10px;
            cursor: pointer;
        }
        .selectClass:nth-child(1){
            margin-left: 0px;
        }
        .description{
            display: flex;
            flex-direction: column;
            width: 100%;
            img{
                width:calc(100% - 50px);
                margin-left: 20px;
            }
        }
        .descTitle{
            height: 40px;
            width: calc(100% - 50px);
            background-color: #f4f4f4;
            margin-left: 20px;
            margin-top: 10px;
            display: flex;
            .descTitleFont{
                width: 80px;
                height: 40px;
                background: red;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-left: 10px;
                padding-right: 10px;
            }
        }
        .footer{
            height: 100px;
            width: 100%;
        }
        .el-input-number{
            margin-left: 100px;
            margin-bottom: 40px;
        }

    }

</style>
